<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style>
        #pvpLayer{
            position: absolute;
            width: 100%;
            height: 100%;
        }

        #TimeTextDv{
            position: absolute;
            padding-top: 25px;
            left: 50%;
            margin-left: -60px;
            margin-top: 30px;
            width: 120px;
            height: 95px;
            border-radius: 100%;
            color: white;
            text-align: center;
        }


        #pvpContent{
            margin: 150px auto 0;
            width: 1500px;
            height: 800px;
        }

        #pvpLeft{
            margin-left: 50px;
            position: absolute;
            width: 250px;
            height: 250px;
            margin-top: 200px;
            border-radius: 60px;
            background: white;
        }

        #pvpMiddle{
            position: absolute;
            width: 900px;
            height: 600px;
            margin: 60px 0 0 300px;
            background: rgba(184, 187, 187, 0.3);
            border-radius: 50px;
        }

        #Question{
            position: relative;
            text-align: center;
            padding-top: 60px;
            background-color: #7a9cad;
            width: 600px;
            height: 110px;
            margin: 30px auto 0;
            border-radius: 60px;
        }

        #content{
            position: absolute;
            left: 50%;
            color: white;
            margin-left: -250px;
            width: 500px;
            height: 60px;
            text-align: center;
            line-height : 30px;
            word-wrap: break-word;
            font-size: 1.2em;
        }

        .answers{
            width: 600px;
            height: 350px;
            margin: 0 auto;
            background: rgba(255,255,255,0.3);
            border-radius: 40px;
        }

        .answer{
            width: 400px;
            height: 60px;
            margin: 30px auto 0;
        }

        .answerBtn{
            width: 400px;
            height: 60px;
            margin: 0 auto;
        }

        .duBtn{
            border-radius:20px;
            background-color: #7a9cad;
            color: white;
            font-size: 1.5em;
            cursor: pointer;
            margin-top: 20px;
            height: 40px;
        }


        #pvpRight{
            position: absolute;
            width: 250px;
            height: 250px;
            margin: 200px 0 0 1200px;
            border-radius: 60px;
            background: white;
        }

        .userPhotoDv{
            width: 100px;
            height: 100px;
            border-radius: 100%;
            margin: 25px auto 0;
        }

        .userPhoto{
            width: 100px;
            height: 100px;
            border-radius: 100%;
        }

        .userNameDv{
            width: 180px;
            height: 30px;
            margin: 15px auto ;
            text-align: center;
            font-size: 1.5em;
        }

        .FractionDv{
            width: 250px;
            height: 50px;
            margin: 0 auto ;
            text-align: center;
            font-size: 30px;
            color: #2d8e98;
        }

        .FractionDv b{
            padding: 0;
        }

        .duBtn:hover{
            background: #8dadb4;
        }


        button{
            outline: none;
            border: none;
        }


        body{
            margin: 0;
            padding: 0;
            background: #e4e7e8;
        }

        #TimeTextDv{
            background: url("../img/clock.jpg");
            background-size:cover;
        }

        #coverLayerContent{
            width: 500px;
            height: 500px;
            margin: 200px auto 0;
        }

        body{
            background: url("../img/PK2.jpg");
            background-size:cover;
        }

        #coverLayer{
            position: absolute;
            width: 100%;
            height:100%;
            display: none;
            z-index: 10;
        }

        #floatLayer{
            position: absolute;
            display: none;
            width: 100%;
            height:100%;
            z-index: 11
        }

        #floatDv{
            margin: 350px auto 0;
            width: 300px;
            height: 170px;
            background: white;
        }

        #floatTitle{
            width: 300px;
            height: 25px;
            text-align: center;
            font-size: 25px;
            color: #ff6969;
            margin-top: 15px;
        }

        #floatText{
            width: 300px;
            height: 40px;
            text-align: center;
            font-size: 15px;
            margin-top: 30px;
        }

        #floatBtn{
            width: 150px;
            height: 25px;
            padding-top: 5px;
            margin: 20px auto 0;
            text-align: center;
            font-size: 15px;
            background: #777;
            cursor: pointer;
        }

    </style>
</head>
<body>
<div id="pvpLayer">
    <div id="TimeTextDv">
        <b id="TimeText"  style="font-size: 4em">15</b>
        <span style="font-size: 2em">秒</span>
    </div>

    <div id="pvpContent">
        <div id="pvpLeft">
            <div id="userMyselfPhotoDv" class="userPhotoDv">
                <img id="userMyselfPhoto" src="" class="userPhoto">
            </div>
            <div id="userMyselfNameDv" class="userNameDv">
                <b id="userMyselfName"></b>
            </div>
            <div id="userMyselfFractionDv" class="FractionDv">
                <b style="font-size: 25px">积分:</b>
                <b id="userMyselfFraction">0</b>
            </div>
        </div>

        <div id="pvpMiddle">
            <div id="Question">
                <div id="content">
                    <span id="questionTitle" style="font-size: 25px;"></span>
                </div>
            </div>


            <div id="answers" class="answers">
                <div id="as1" class="answer">
                    <button id="answer1Dv" class="answerBtn duBtn">
                        <span>A.</span>
                        <span id="answer1"></span>
                    </button>
                </div>

                <div id="as2" class="answer">
                    <button id="answer2Dv" class="answerBtn duBtn">
                        <span>B.</span>
                        <span id="answer2"></span>
                    </button>
                </div>

                <div id="as3" class="answer">
                    <button id="answer3Dv" class="answerBtn duBtn">
                        <span>C.</span>
                        <span id="answer3"></span>
                    </button>
                </div>

                <div id="as4" class="answer">
                    <button id="answer4Dv" class="answerBtn duBtn">
                        <span>D.</span>
                        <span id="answer4"></span>
                    </button>
                </div>
            </div>
        </div>


        <div id="pvpRight">
            <div id="opponentPhotoDv" class="userPhotoDv">
                <img id="opponentPhoto" src="" class="userPhoto">
            </div>
            <div id="opponentNameDv" class="userNameDv">
                <b id="opponentName"></b>
            </div>
            <div id="opponentFractionDv" class="FractionDv">
                <b style="font-size: 25px">积分:</b>
                <b id="opponentFraction">0</b>
            </div>
        </div>
    </div>
</div>
<div id="coverLayer"></div>

<div id="floatLayer">
    <div id="floatDv">
        <div id="floatTitle">恭喜！</div>
        <div id="floatText">您已经完成此处对战的所有的题目</div>
        <div id="floatBtn"><span id="floatBtnSpan">结束对战</span></div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery" charset="utf-8"></script>
<script src="https://www.layuicdn.com/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    var questionIds,QIDs,NowQuestionId=0,timeDown,timeType=0,OpenType=0,opponentPointData,floatBtnType=0;

        socket = new WebSocket ( "ws://localhost:8848/websocket/"+sessionStorage.getItem('userId')+','+sessionStorage.getItem('enemyId'));
    console.log(sessionStorage.getItem('userId')+','+sessionStorage.getItem('enemyId'))
        // 获得消息事件
        socket.onmessage = function (msg) {
            console.log(msg)
            let reg = new RegExp("[\\u4E00-\\u9FFF]+","g");
            if(reg.test(msg.data)){
                if (msg.data==='对方已经逃跑'){
                    timeType=1;
                    $('#CoverLayer').css('display','block')
                    let confirm= layer.msg('对方已经断开了比赛连接，因此您已经获得了胜利，请返回上一 界面', {
                           btn: ['返回主界面'],resize:false
                        }
                        ,function (){
                            layer.close(confirm)
                            location.href='pvp_mode.html';
                        })
                }
                else {
                    opponentPointData=JSON.parse(msg.data);
                    Right(2)
                }
            }else {
                questionIds=JSON.parse(msg.data);
                QIDs=[questionIds.id1,questionIds.id2,questionIds.id3,questionIds.id4,questionIds.id5,]
                OpenType=OpenType+1
                if (OpenType===1){
                    Qs(NowQuestionId);
                }
            }
        };


    Open();
    problemPush();

    //FirstLayer();


    $('.answerBtn').click( function(){
        timeType=1;
        $('#coverLayer').css('display','block')
        if ($(this).attr('id')==='answer1Dv'){
            answer('A');
        }
        else if ($(this).attr('id')==='answer2Dv'){
            answer('B');
        }
        else if ($(this).attr('id')==='answer3Dv'){
            answer('C');
        }
        else if ($(this).attr('id')==='answer4Dv'){
            answer('D');
        }
    })

    $('#floatBtn').click(function () {
        if (floatBtnType===0){
            layer.msg('抱歉，对方暂时未完成答题，请等待对方完成....')
        }
        else if(floatBtnType===1){
            $.ajax({
                url: '/pvp-info/over',
                method: 'POST',
                contentType: 'application/json',
                data:JSON.stringify({
                    userId:sessionStorage.getItem('userId'),
                    enemy:sessionStorage.getItem('enemyId'),
                    mypoints:parseInt($('#userMyselfFraction').text()),
                    hispoints:parseInt($('#opponentFraction').text())
                }),
                success: function (res) {
                    layer.msg(res.msg);
                    location.href='user_index.html'
                }
            })
        }
    })


    function Open() {
        $.ajax({
            url: '/user/getUserInfoById/'+sessionStorage.getItem('userId'),
            method: 'GET',
            contentType: 'application/json',
            success: function (res) {
                $('#userMyselfName').text(res.data.username)
                $('#userMyselfPhoto').attr('src','http://localhost:8088/'+res.data.userImage)
            }
        })

        $.ajax({
            url: '/user/getUserInfoById/'+sessionStorage.getItem('enemyId'),
            method: 'GET',
            contentType: 'application/json',
            success: function (res) {
                $('#opponentName').text(res.data.username)
                $('#opponentPhoto').attr('src','http://localhost:8088/'+res.data.userImage)
            }
        })
    }

    function problemPush() {
        $.ajax({
            url: '/pvp-info/socket/pushQuestion/'+sessionStorage.getItem('userId'),
            method: 'GET',
            contentType: 'application/json',
        })
    }


    function Qs(NowQuestionId){
            $.ajax({
                url: '/question-info/getById/'+ QIDs[NowQuestionId],
                method: 'GET',
                contentType: 'application/json',
                success: function (res) {
                    timeType=0;
                    $('#coverLayer').css('display','none')
                    Countdown(15);
                    $('#questionTitle').text(res.data.questionTitle);
                    $('#answer1').text(res.data.answer1);
                    $('#answer2').text(res.data.answer2);
                    $('#answer3').text(res.data.answer3);
                    $('#answer4').text(res.data.answer4);
                }
            })
    }


    function  answer(answer){
        $.ajax({
            url: '/pvp-info/trueOrFalse',
            method: 'POST',
            contentType: 'application/json',
            data:JSON.stringify({
                userId:sessionStorage.getItem('userId'),
                enemyId:sessionStorage.getItem('enemyId'),
                answer:answer,
                questionId:QIDs[NowQuestionId]
            }),
            success: function (res) {
                layer.msg(res.msg,function (){
                    if (NowQuestionId===5){
                        $('#floatLayer').css('display','block')
                        OverSwitch();
                        $('#questionTitle').text('');
                        $('#answer1').text('');
                        $('#answer2').text('');
                        $('#answer3').text('');
                        $('#answer4').text('');
                        $('#coverLayer').css('display','block')
                    }
                    else {
                        Qs(NowQuestionId);
                    }
                });
                if (res.msg==='答对了'){
                    Right(1);
                }
                NowQuestionId=NowQuestionId+1;
            }
        })
    }


    function Countdown(time) {
        timeDown=time
        if (timeType===1){

        }
        else if (timeType===0){
            if(timeDown===0){
                ClosePlay();
                timeType=1;
            }
            else {
                setTimeout(function () {
                    timeDown=timeDown-1
                    Countdown(timeDown)
                    $('#TimeText').text(timeDown)
                },1000);
            }
        }
    }


    function FirstLayer() {
        $('#coverLayer').css('display','block')
     let CoverContent='<div id="coverLayerContent">' +
         '<div id="PKpictureDv">' +
         '<img id="PKpicture" src="../img/PKP.png"></div>' +
         '</div>'
        let CoverFloor=document.getElementById('coverLayer')
        CoverFloor.innerHTML=CoverContent;
    }

    function Right(divName){
        if (divName===1){
            let UserFraction=parseInt($('#userMyselfFraction').text())
            // UserFraction=UserFraction+10;
            $('#userMyselfFraction').text(UserFraction)
            $('#userMyselfFraction').animate({
                    fontSize: '+=15px'
                },1000).css('color','red')
            setTimeout(function () {
                $('#userMyselfFraction').animate({
                    fontSize: '-=15px'
                },1000).css('color','#2d8e98')
            },1000);
        }
        else if (divName===2){
            if (opponentPointData.userId==sessionStorage.getItem('enemyId')){
                    $('#opponentFraction').text(opponentPointData.point)
                    $('#opponentFraction').animate({
                        fontSize: '+=15px'
                    },1000).css('color','red')
                    setTimeout(function () {
                        $('#opponentFraction').animate({
                            fontSize: '-=15px'
                        },1000).css('color','#2d8e98')
                    },1000);
                }
            else {
                $('#userMyselfFraction').text(opponentPointData.point)
                $('#userMyselfFraction').animate({
                    fontSize: '+=15px'
                },1000).css('color','red')
                setTimeout(function () {
                    $('#userMyselfFraction').animate({
                        fontSize: '-=15px'
                    },1000).css('color','#2d8e98')
                },1000);
            }
        }
    }

    function OverSwitch(){
        setTimeout(function () {
            $.ajax({
                url: '/pvp-info/isOver/'+sessionStorage.getItem('userId')+','+sessionStorage.getItem('enemyId'),
                method: 'GET',
                contentType: 'application/json',
                success: function (res) {
                    if (res.code===200){
                        floatBtnType=1
                        $('#floatBtn').css('background','#d9a77a').css('color','white')
                    }
                    else if (res.code===400){
                        OverSwitch();
                    }
                }
            })
        },1000)
    }

    function ClosePlay(){
        $('#coverLayer').css('display','block')
        socket.close();
        layer.msg('由于您长时间未进行操作，系统判定您为挂机行为，此次比赛为负',function () {
            layer.msg('正在退出比赛......',function (){
                location.href='pvp_mode.html';
            })
        })
    }
</script>

</body>
</html>